<script setup name="spareinfo">
import { reactive } from 'vue-demi'

const { proxy } = getCurrentInstance()
// 备件库存 字典查询
const {
  picking_returns_status, // 检验项目单据状态
  picking_returns_type, //检验项目收发类型
  picking_rest_category, //检验项目新增类别
  sys_material_unit //物料单位
} = proxy.useDict('picking_returns_status', 'picking_returns_type', 'picking_returns_category', 'sys_material_unit')

// 保存单挑数据 用作回显
const ruleForm = ref({})

// tabs默认值
const activeName = ref('1')

// 保存加载状态
const Btnloading = ref(false)

// 表格加载状态
const loading = ref(false)

// 库存汇总 表格数据
const tableData = ref([])

// 库存明细 表格数据
const Datatab = ref([])

// 列表总数量
const total = ref(0)

// 查询条件
const SelectList = ref([
  { label: '备件编码', model: 'a', type: '输入框' },
  { label: '备件名称', model: 'a', type: '输入框' },
  { label: '备件类别', model: 'a', type: '下拉单选' },
  { label: '备件号码', model: 'a', type: '输入框' },
  { label: '备件批次', model: 'a', type: '输入框' },
  { label: '供应商信息', model: 'a', type: '输入框' },
  { label: '仓库信息', model: 'a', type: '下拉单选' },
  { label: '库区信息', model: 'a', type: '下拉单选' },
  { label: '库位信息', model: 'a', type: '下拉单选' }
])

// 查询条件 分页
const query = reactive({
  pageNum: 1,
  pageSize: 10
})
</script>
<template>
  <div class="app-container">
    <div class="app">
      <!-- 查询条件组件 -->
      <SelectForm :SelectForm="SelectList" @selectSubmit="selectSubmit" />
    </div>
    <!--备件库存 表格数据 -->
    <el-card class="box-card">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="库存汇总" name="1">
          <el-table v-loading="loading" stripe border :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" fixed="left" />
            <el-table-column label="序号" width="70" type="index" align="center" />
            <el-table-column label="备件编码" align="center" prop="wodDocNum" width="120"> </el-table-column>
            <el-table-column label="备件名称" align="center" width="auto" prop="wodStatus" />
            <el-table-column label="备件规格" prop="dateDelivery" width="auto" align="center" />
            <el-table-column label="备件类别" prop="connectionId" width="auto" align="center" />
            <el-table-column label="最小安全库存" prop="materialCode" width="auto" align="center" />
            <el-table-column label="库存数量" prop="materialCode" width="auto" align="center" />
            <el-table-column label="标签数量" prop="materialCode" width="auto" align="center" />
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="query.pageNum"
            v-model:limit="query.pageSize"
            @pagination="getList"
          />
        </el-tab-pane>
        <el-tab-pane label="库存明细" name="2">
          <el-table v-loading="loading" stripe border :data="Datatab" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" fixed="left" />
            <el-table-column label="序号" width="70" type="index" align="center" />
            <el-table-column label="备件号码" align="center" prop="wodDocNum" width="auto"> </el-table-column>
            <el-table-column label="备件编码" align="center" width="auto" prop="wodStatus" />
            <el-table-column label="备件名称" prop="dateDelivery" width="auto" align="center" />
            <el-table-column label="备件规格" prop="connectionId" width="auto" align="center" />
            <el-table-column label="备件单位" prop="materialCode" width="auto" align="center" />
            <el-table-column label="备件类别" prop="materialCode" width="auto" align="center" />
            <el-table-column label="批次号" prop="materialCode" width="auto" align="center" />
            <el-table-column label="供应商" prop="materialCode" width="auto" align="center" />
            <el-table-column label="包装内数量" prop="materialCode" width="auto" align="center" />
            <el-table-column label="外包装单位" prop="materialCode" width="auto" align="center" />
            <el-table-column label="仓储信息" prop="materialCode" width="auto" align="center" />
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="query.pageNum"
            v-model:limit="query.pageSize"
            @pagination="getList"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.btnmp {
  margin-bottom: 20px;
}
.app-container ::v-deep .el-input__inner {
  width: 168px !important;
}
</style>
